/**
 * Navbar
 */

@use '../../../css/mixins/config';
@use '../../../css/mixins/components';

@mixin navbar-collapse {
    .navbar-collapsible {
        @include components.border-radius('navbar');

        position: relative;
        display: block;
        width: 100%;

        .nav {
            flex-direction: column;
            align-items: flex-start;

            &:first-of-type {
                @include components.margin('navbar', 'collapsed');
            }

            .nav-item {
                @include components.transition('navbar');

                width: 100%;
            }

            .dropdown-wrapper {
                width: 100%;

                .dropdown {
                    width: 100%;
                    position: relative !important;
                    left: auto !important;
                    top: auto !important;
                    transform-origin: center top;

                    [data-popper-arrow] {
                        display: none;
                    }
                }
            }
        }
    }

    .collapse-toggle {
        display: inline-block;

        + .navbar-brand {
            order: -1;
        }
    }
}

.navbar {
    @include components.background('navbar');
    @include components.border-width('navbar');
    @include components.border-style('navbar');
    @include components.border-color('navbar');
    @include components.border-radius('navbar');
    @include components.box-shadow('navbar');
    @include components.color('navbar');
    @include components.font-size('navbar');
    @include components.padding('navbar');
    @include components.transition('navbar');

    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    > .container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        &.-fluid {
            padding: 0;
        }
    }

    .navbar-collapsible {
        .nav-item {
            @include components.background('navbar', 'item', true);
            @include components.border-radius('navbar', 'item', true);
            @include components.color('navbar', 'item', true);
            @include components.font-size('navbar', 'item', true);
            @include components.padding('navbar', 'item', true);
            @include components.transition('navbar', 'item', true);

            &.-hover,
            &:hover {
                @include components.background('navbar', 'item' 'hover', true);
                @include components.color('navbar', 'item' 'hover', true);
            }

            &.-focus,
            &:focus {
                @include components.background('navbar', 'item' 'focus', true);
                @include components.color('navbar', 'item' 'focus', true);
            }

            &.-active,
            &:active {
                @include components.background('navbar', 'item' 'active', true);
                @include components.color('navbar', 'item' 'active', true);
                @include components.font-weight('navbar', 'item' 'active', true);

                cursor: pointer;
            }
        }
    }

    &.-collapsible {
        .navbar-collapsible {
            @include components.background('navbar', 'collapsed');

            .nav-item {
                @include components.background('navbar', 'collapsed' 'item', true);
                @include components.color('navbar', 'collapsed' 'item', true);

                &:hover {
                    @include components.background('navbar', 'collapsed' 'item' 'hover', true);
                    @include components.color('navbar', 'collapsed' 'item' 'hover', true);
                }
            }
        }
    }

    .collapse-toggle {
        display: none;
    }

    @each $breakpoint in config.$breakpoint-keys {
        &.-collapse-#{$breakpoint} {
            @include config.breakpoint-down($breakpoint) {
                @include navbar-collapse;
            }
        }
    }

    &.-collapse-true {
        @include navbar-collapse;
    }
}
